<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Examples</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <style>
      body,dl,dt,dd,p{margin:0;padding:0;}
      body{font-family:Tahoma;font-size:12px;}
      label,input,a{vertical-align:middle;}
      label{padding:0 10px 0 5px;}
      a{color:#09f;text-decoration:none;}
      a:hover{color:red;}
      dl{width:120px;margin:10px auto;padding:10px 5px;border:1px solid #666;border-radius:5px;background:#fafafa;}
      dt{padding-bottom:10px;border-bottom:1px solid #666;}
      dt label{font-weight:700;}
      p{margin-top:10px;}
      div{text-align: center;}
    </style>
  </head>
  <body>   
    <dl>
      <dt>
        <input id="checkAll" type="checkbox">
        <label>全不选</label>
        <a href="javascript:;">反选</a>
      </dt>
      <dd>
        <p><input name="item" type="checkbox"><label>选项（一）</label></p>
        <p><input name="item" type="checkbox"><label>选项（二）</label></p>
        <p><input name="item" type="checkbox"><label>选项（三）</label></p>
        <p><input name="item" type="checkbox"><label>选项（四）</label></p>
        <p><input name="item" type="checkbox"><label>选项（五）</label></p>
        <p><input name="item" type="checkbox"><label>选项（六）</label></p>
        <p><input name="item" type="checkbox"><label>选项（七）</label></p>
        <p><input name="item" type="checkbox"><label>选项（八）</label></p>
        <p><input name="item" type="checkbox"><label>选项（九）</label></p>
        <p><input name="item" type="checkbox"><label>选项（十）</label></p>
      </dd>    
    </dl>
    <div>1、切换全选/全不选文字；2、根据选中个数更新全选框状态；</div>



    


    <script>
      window.onload = function() {
        var oA = document.getElementsByTagName("a")[0],
            oInput = document.getElementsByTagName("input"),
            oLabel = document.getElementsByTagName("label")[0];

        var isCheckAll = function() {
          for (var i = 1, n = 0, l = oInput.length; i < l; ++i) {
            oInput[i].checked && n++;
          }
          oInput[0].checked = n == oInput.length-1;
          oLabel.innerHTML = oInput[0].checked ? '全不选' : '全选';
        }

        oInput[0].onclick = function() {
          for (var i = 1, l = oInput.length; i < l; ++i) {
            oInput[i].checked = this.checked;
          }
          isCheckAll();
        }

        oA.onclick = function() {
          for (var i = 1, l = oInput.length; i < l; ++i) {
            oInput[i].checked = !oInput[i].checked;
          }
          isCheckAll();
        }

        for (var i = 1, l = oInput.length; i < l; ++i) {
          oInput[i].onclick = function() {
            isCheckAll();
          }
        }
      }
    </script>    
  </body>
</html>